---
title: Color Mode | gluestack-ui
description: gluestack-ui provides an easy way to manage color modes, in this guide we will learn how we can change and manage color modes.
---

import {
  GluestackUIProvider,
  Text,
  Center,
  Button,
  Box,
  ButtonText,
} from '@gluestack-ui/themed';
import { transformedCode } from '../../../utils';
import Wrapper from '../../../components/Wrapper';

import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
} from '@gluestack/design-system';
import { Meta } from '@storybook/addon-docs';

<Meta title="ui/Home/Styling/Color Mode" />

# Color Mode

We can apply different styles based on different color mode by defining `_dark` and `_light` property in `sx` prop.

In the below example we are defining styles to be applied in dark mode in `_dark` object and for light mode in `_light` object.

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
     <>
 <Button
 $dark-bg="$blue600"
  $light-bg="$red600"
        >
          <ButtonText>Hello world</ButtonText>
        </Button>
     </>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Text,
        Button,
        Box,
        ButtonText,
      },
      argsType: {},
    }}
  />
</AppProvider>

[Expo snack](https://snack.expo.dev/@gluestack/gluestack-ui-color-mode) link for managing color mode.